<template>
  <el-dialog :title="title" center :visible.sync="openState" :close-on-click-modal="false" width="1024px" append-to-body>
    <div class="discountReceipt-pick-operate-box">
      <div class="operate-box-top">
        <Ht-search-form
          :defaultEventKey="defaultSearchKey"
          :dictMap="dictMapAsync"
          :queryParams="queryParams"
          :outputQueryParams="queryParams"
          :formOptions="formOptions"
          :advOptions="[]"
          :showResetBtn="false"
          :labelWidth="90"
        ></Ht-search-form>
      </div>
      <div class="operate-box-bottom">
        <div class="bottom-content">
          <ht-table
            :defaultEventKey="defaultSearchKey"
            ref="dataTableDetail"
            rowKey="bankCode"
            :showSerialNumber="false"
            :multi-select="false"
            :dictMap="dictMapAsync"
            :reqConfig="reqConfig"
            :queryParams="queryParams"
            :tableBindColumns="tableBindColumns"
            :showRightToolbar="false"
            :initData="false"
          >
            <template v-slot:operate>
              <el-table-column
                label="操作"
                align="center"
                fixed="left"
                width="120"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <ht-button-group
                    :buttonList="[
                      {
                        label: '选择',
                        doFunc: () => {
                          confirm(scope.row);
                        },
                      },
                    ]"
                  />
                </template>
              </el-table-column>
            </template>
          </ht-table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { amountThousandsFormatter } from "@/utils/table_col_formatter";
import { realTimePaymentEntryoriDetailQuery } from "@/api/cnaps/beps/363";

export default {
  name: "RealTimePaymentEntryOirDetailDailog",
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      title: "",
      openState: false,
      defaultSearchKey: "cnapsBankSearch-dialog",
      // 来源标识 为了服用区分是哪个选项触发的
      fromFlag: "",
      dictMapAsync: this.dictMap,
      tableLoadingState: false,
      formOptions: [],
      queryParams: {
        workdate: undefined,
        workdate2: undefined,
        feeId: undefined,
        uniformScCode: undefined,
        custId: undefined,
      },
      reqConfig: realTimePaymentEntryoriDetailQuery,
      tableBindColumns: [
        // {
        //   label: '操作', type: 'operate',buttonList: (row) => [
        //     {
        //       label: '选择',
        //       doFunc:(rowData) => {
        //         confirm(rowData);
        //       }
        //     }
        //   ]
        // },
        { prop: "id", label: "交易流水号/批次流水号", width: 180 },
        { prop: "workdate", label: "工作日期", type: "date", width: 120 },
        {
          prop: "msgType",
          label: "报文类型",
          formatter(row, text, index) {
            return (
              (row["msgType"] === null || row["msgType"] === undefined ? "" : row["msgType"]) +
              "-" +
              (row["msgTypeDesc"] === null || row["msgTypeDesc"] === undefined ? "" : row["msgTypeDesc"])
            );
          },
          width: 300,
        },
        { prop: "pkgId", label: "报文标识号", width: 180 },
        { prop: "directSender", label: "发起直接参与机构", width: 180 },
        { prop: "indirectSender", label: "发起间接参与机构", width: 180 },
        { prop: "feeId", label: "费用标识", width: 120 },
        { prop: "uniformScCode", label: "统一社会信用代码", width: 180 },
        { prop: "custId", label: "客户标识", width: 120 },
        {
          prop: "regionId",
          label: "地域标识",
          formatter(row, text, index) {
            return (
              (row["regionId"] === null || row["regionId"] === undefined ? "" : row["regionId"]) +
              "-" +
              (row["regionIdDesc"] === null || row["regionIdDesc"] === undefined ? "" : row["regionIdDesc"])
            );
          },
          width: 180,
        },
        { prop: "arrearsTotalAmt", label: "缴款金额", type: "price", width: 120 },
        { prop: "totalBill", label: "需付款行代扣的手续费", type: "price", width: 180 },
      ],
    };
  },
  mounted() {
    const formOptions = [
      {
        type: "dates",
        nameObj: {
          startTimeName: "workdate",
          endTimeName: "workdate2",
        },
        defaultAttr: {
          label: "工作日期",
          placeholder: ["请输入开始日期", "请输入结束日期"],
          format: "yyyy-MM-dd",
          valueFormat: "yyyyMMdd",
        },
      },

      {
        type: "dict",
        dict: "FEE_ID",
        prop: "feeId",
        defaultAttr: {
          size: "small",
          label: "费用标识",
          placeholder: "请输入费用标识",
          disabled: true,
        },
      },
      {
        type: "input",
        prop: "uniformScCode",
        defaultAttr: {
          size: "small",
          label: "统一社会信用代码",
          placeholder: "请输入统一社会信用代码",
          disabled: true,
        },
      },

      {
        type: "input",
        prop: "custId",
        defaultAttr: {
          size: "small",
          label: "客户标识",
          placeholder: "请输入客户标识",
          disabled: true,
        },
      },
    ];
    this.formOptions = formOptions;
  },
  methods: {
    show() {
      this.openState = true;
      this.$set(this.queryParams, "feeId", this.formData.feeId);
      this.$set(this.queryParams, "uniformScCode", this.formData.uniformScCode);
      this.$set(this.queryParams, "custId", this.formData.custId);
      this.$nextTick(() => {
        this.$refs.dataTableDetail.doQuery(true);
      });
    },
    close() {
      this.openState = false;
    },
    loadData() {},
    // 点击确认数据
    confirm(row) {
      this.$emit("confirm", row);
      this.openState = false;
    },
  },
};
</script>
<style scoped></style>
